<template lang='pug'>
.reply-wrap.d-flex.align-items-center
  span.color-d8 快捷回复：
  a.btn.btn-xs.reply-item(
    v-for="(item, index) in optValues.slice(0, initShow)"
    :key="item"
    :class="{'isActive': item==optValues}"
    @click.self="$emit('input', item)") {{item}}
  el-select(v-if="optValues.length>initShow"
    v-model="selectValue"
    size="mini"
    @change="$emit('input', selectValue)")
    el-option(v-for="(opt, j) in optValues.slice(initShow, optValues.length)"
      :key="`opt-${j}`"
      :label="opt"
      :value="opt") {{opt}}
</template>

<script>
/**
 * @name SmartQuickReply - 快捷回复，标签式展示, 仅允许字符串式内容
 * @author linmn
 * @example form: {
 *  quickReply: {
      value: ['1212312', '21111', '3222', '41313', 'sdad', 'fafaf', 'ssssss'],
      initShow: 2
    }
 * }
 */
export default {
  name: 'SmartQuickReply',
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    initShow: {
      type: Number,
      default: 2
    } // 默认显示的个数
  },
  computed: {
    optValues () {
      return this.options.value
    }
  },
  data () {
    return {
      selectValue: ''
    }
  },
  methods: {
    publish (item) {
      this.$emit('input', item)
    }
  }
}
</script>

<style lang='sass' scoped>
.reply-wrap
  margin-top: 3px
.reply-item:not(:last-child)
  margin-right: 5px
.color-d8
  color: #d8d8d8
.isActive
  color: #4B99FF
</style>
